<template>
    <div class="app-container system-operlog" v-loading="isLoading">
        <sib-table ref="sibTableRef" row-key="operId" :search-config="searchConfig" :table-column="tableColumn" :request-config="requestConfig">
            <!-- 自定义插槽，插槽名称为对应列配置的 code -->
            <template #operate="{ row }">
                <el-button type="primary" v-hasPermi="['system:operlog:query']" link @click="handleViewDetail(row)">详情</el-button>
                <el-button type="danger" v-hasPermi="['system:operlog:delete']" link @click="handleDelete(row)">删除</el-button>
            </template>
            <!-- 自定义表单与列表之间的内容 -->
            <template #operation-container>
                <el-button type="warning" plain icon="Download" v-hasPermi="['system:operlog:export']" @click="handleExport">导出</el-button>
                <el-button type="danger" plain icon="Delete" v-hasPermi="['system:operlog:remove']" @click="handleClear">清空</el-button>
            </template>
        </sib-table>

        <el-dialog
            title="操作日志详情"
            v-if="dialogConfig.visible"
            append-to-body
            draggable
            align-center
            v-model="dialogConfig.visible"
            :close-on-click-modal="false"
            :width="dialogConfig.width || '700px'"
        >
            <sib-form disabled :fields="dialogConfig.fields" :form="dialogConfig.form"></sib-form>
        </el-dialog>
    </div>
</template>

<script>
import { ref, reactive, inject } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';

export default {
    // eslint-disable-next-line
    name: 'Operlog',
    setup() {
        const $axios = inject('$axios');
        const isLoading = ref(false);
        const sibTableRef = ref(null);
        // 查询模块表单配置
        const searchConfig = reactive({
            // showExpand: false,
            defaultExpandFields: 3,
            rowFieldSize: 4,
            fields: [
                {
                    label: '系统模块',
                    code: 'title',
                    type: 'text',
                    maxlength: 100,
                },
                {
                    label: '操作人员',
                    code: 'operName',
                    type: 'text',
                    maxlength: 100,
                },
                {
                    label: '类型',
                    code: 'businessType',
                    type: 'select',
                    optionProps: { value: 'dictValue', label: 'dictLabel' },
                    requestConfig: {
                        url: '/system/dict/data/type/sys_oper_type',
                        method: 'get',
                    },
                    options: [],
                },
                {
                    label: '状态',
                    code: 'status',
                    type: 'select',
                    optionProps: { value: 'dictValue', label: 'dictLabel' },
                    requestConfig: {
                        url: '/system/dict/data/type/sys_common_status',
                        method: 'get',
                    },
                    options: [],
                },
                {
                    label: '操作时间',
                    code: 'daterange',
                    type: 'daterange',
                    startCode: 'beginTime',
                    endCode: 'endTime',
                    // valueFormat: 'x',
                },
            ],
        });
        // 表格表头配置
        const tableColumn = ref([
            {
                label: '日志编号',
                code: 'operId',
            },
            {
                label: '系统模块',
                code: 'title',
                minWidth: 120,
            },
            {
                label: '操作类型',
                code: 'businessType',
                relateFieldCode: 'businessType',
            },
            {
                label: '请求方式',
                code: 'requestMethod',
            },
            {
                label: '操作人员',
                code: 'operName',
            },
            {
                label: '主机',
                code: 'operIp',
                minWidth: 130,
            },
            {
                label: '操作状态',
                code: 'status',
                type: 'tag',
                relateFieldCode: 'status',
                tagType: ({ status }) => (String(status) === '0' ? 'success' : 'danger'),
            },
            {
                label: '操作日期',
                code: 'operTime',
                type: 'timeStamp',
                format: 'YYYY-MM-DD hh:mm',
                minWidth: 160,
            },
            {
                label: '操作',
                code: 'operate',
                type: 'slot',
                fixed: 'right',
                minWidth: 120,
            },
        ]);
        // 列表查询接口配置
        const requestConfig = reactive({
            url: '/system/operlog/list',
            method: 'get',
            // 自定义传参
            customSearchParams: obj => {
                const params = {};
                Object.keys(obj).forEach(key => {
                    if ([0, false].includes(obj[key]) || obj[key]) params[key] = obj[key];
                });
                if (params.beginTime) params.beginTime = +new Date(`${params.beginTime} 00:00:00`);
                if (params.endTime) params.endTime = +new Date(`${params.endTime} 23:59:59`);
                return params;
            },
        });
        const dialogConfig = reactive({
            visible: false,
            fields: [
                {
                    label: '操作模块：',
                    code: 'title',
                    type: 'label',
                    width: 'calc(50% - 10px);',
                },
                {
                    label: '登录信息：',
                    code: 'operName',
                    type: 'label',
                    width: 'calc(50% - 10px);',
                },
                {
                    label: '请求地址：',
                    code: 'operUrl',
                    type: 'label',
                    width: 'calc(50% - 10px);',
                },
                {
                    label: '请求方式：',
                    code: 'requestMethod',
                    type: 'label',
                    width: 'calc(50% - 10px);',
                },
                {
                    label: '操作方法：',
                    code: 'method',
                    type: 'label',
                },
                {
                    label: '请求参数：',
                    code: 'operParam',
                    type: 'label',
                },
                {
                    label: '返回参数：',
                    code: 'jsonResult',
                    type: 'label',
                },
                {
                    label: '操作状态：',
                    code: 'operStatus',
                    type: 'label',
                },
                {
                    label: '操作时间：',
                    code: 'operTime',
                    type: 'label',
                },
                {
                    label: '异常信息：',
                    code: 'errorMsg',
                    type: 'label',
                },
            ],
            form: {},
        });

        return {
            isLoading,
            sibTableRef,
            searchConfig,
            tableColumn,
            requestConfig,
            dialogConfig,
            handleViewDetail(row) {
                dialogConfig.form = {
                    ...row,
                    operTime: window.SIB.formatDate(row.operTime, 'YYYY-MM-DD hh:mm:ss'),
                    operStatus: String(row.status) === '0' ? '正常' : '失败',
                    errorMsg: String(row.status) === '0' ? '无异常' : row.errorMsg,
                };
                dialogConfig.visible = true;
            },
            handleDelete(row) {
                // prettier-ignore
                ElMessageBox.confirm(`是否删除日志编号为【${row.operId}】的数据项？`, '温馨提示').then(() => {
                    $axios.delete(`/system/operlog/${row.operId}`).then(() => {
                        ElMessage({ type: 'success', message: '删除成功' });
                        sibTableRef.value.getTableData();
                    });
                }).catch(() => {});
            },
            handleClear() {
                // prettier-ignore
                ElMessageBox.confirm('是否确认清空所有操作日志数据项？', '温馨提示').then(() => {
                    $axios.delete('/system/operlog/clean').then(() => {
                        ElMessage({ type: 'success', message: '操作成功' });
                        sibTableRef.value.getTableData();
                    });
                }).catch(() => {});
            },
            handleExport() {
                isLoading.value = true;
                // prettier-ignore
                $axios.post('/system/operlog/export', sibTableRef.value.searchParams || {}, { responseType: 'blob' }).then(res => {
                    window.SIB.download(res, `operlog_${new Date().getTime()}.xlsx`);
                    ElMessage({ type: 'success', message: '导出成功' });
                }).finally(() => {
                    isLoading.value = false;
                });
            },
        };
    },
};
</script>

<style lang="scss">
.system-operlog {
    height: calc(100vh - 84px);

    .sib-table {
        height: 100%;
    }
}
</style>
